<template>
	<view class="container">
	<form @submit="formSubmit" @reset="formReset">
				<view class="uni-form-item uni-column">
					<view class="title">姓名</view>
					<input class="uni-input" name="nickname" placeholder="请输入姓名"></input>
				</view>
				<view class="item uni-column">
					<view class="title">性别</view>
					<radio-group name="gender">
						<label>
							<radio value="man"/><text>男</text>
						</label>
						<label>
							<radio value="woman"/><text>女</text>
						</label>
					</radio-group>
				</view>
				<view class="item uni-column">
					<view class="title">爱好</view>
					<radio-group name="hobby">
						<label>
							<radio value="read"/><text>读书</text>
						</label>
						<label>
							<radio value="write"/><text>写字</text>
						</label>
					</radio-group>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">年龄</view>
					<slider value="20" name="age" show-value></slider>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">保留选项</view>
					<view>
						<switch checked @change="switch1Change"></switch>
					</view>
				</view>
				<view class="uni-btn-v">
					<button form-type="submit">Submit</button>
					<button type="default" form-type="reset">Reset</button>
				</view>
			</form>
		</view>
	</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			formSubmit:function(e){
				console.log('form发生了submit事件,携带数据为:' + JSON.stringify(e.detail.value))
				var rule = [
					{name:"nickname",checkType:"string",checkRule:"1,3", errorMsg:"姓名应为1-3字"},
					{name:"gender",checkType:"in",checkRule:"男，女",errorMsg:"请选择性别"},
					{name:"loves",checkType:"notnull",checkRule:"",errorMsg:"请选择爱好"}
				];
						var formData = e.detail.value;
						var checkRes = graceChecker.check(formData,rule);
						if(checkRes){
							uni.showToast({title:"验证通过!",icon:"none"	});
							
							
						}else{
							uni.showToast({
								title:graceChecker.error,icon:"none"
							});
						}
						uni.showModal({
							content:'表单数据内容:' + JSON.stringify(e.detail.value),
							showCancel:false
							
						});
							
				
			},
			formReset:function(e){
				console.log('清空数据')
			}
			
		}
	}
</script>

<style>
	switch{
		transform: scale(0.7);
	}
	radio
	{
		transform: scale(0.7);
	}
	checkbox{
		transform: scale(0.7);
	}
	button{
		
	}
	.container{
		padding: 40upx;
	}
	.item .title{
		padding: 20rpx 0;
	}

</style>

